<%@ page import="cn.labbook.bluetooth.constant.AmmeterConstant" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <base href="<%=basePath%>">
    <title>电表列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="assets/css/admin/reset.css"/>
    <link rel="stylesheet" type="text/css" href="assets/plugins/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_893379_qj8lfap4ylj.css"/>
</head>
<style>
    /*让徽章上下居中*/
    .layui-badge {
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<body>
<div>
    <div class=" clearfix margin-15">
        <div class="layui-col-md12">
            <div class="layui-card-header">
                电表列表
            </div>
            <div class="layui-form layuiadmin-card-header-auto padding-tb-10 layui-card"
                 lay-filter="layadmin-userfront-formlist" id="searchForm">
                <div class="layui-form-item searchDiv" style="margin-bottom: 0">
                    <%--<div class="layui-inline">--%>
                    <%--<label class="layui-form-label" style="text-align: left">房客名称</label>--%>
                    <%--<div class="layui-input-block">--%>
                    <%--<input type="text" placeholder="请输入房客名称" autocomplete="off"--%>
                    <%--class="layui-input" id="userName">--%>
                    <%--</div>--%>
                    <%--</div>--%>
                    <div class="layui-inline">
                        <label class="layui-form-label">电表序列</label>
                        <div class="layui-input-block ">
                            <input type="text" placeholder="请输入电表序列号" autocomplete="off"
                                   class="layui-input" id="ammeterId">
                        </div>
                    </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">异常类型</label>
                            <div class="layui-input-block ">
                                <select id="warnType">
                                    <option value="">请选择</option>
                                    <option value="用电异常">用电异常</option>
                                    <option value="房客入住">房客入住</option>
                                    <option value="房客退房">房客退房</option>
                                    <option value="重要报警">重要报警</option>
                                </select>
                            </div>
                        </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-useradmin" id="search"
                                lay-filter="LAY-user-front-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-tab-content">
                <table class="layui-table" id="payPmList" lay-filter="payPmList"></table>
            </div>
        </div>
    </div>
</div>
<div id="addPmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="editForm" id="editForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th><span class="red">*</span>电表地址</th>
                <td>
                    <input type="text" name="location" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>最高充值金额</th>
                <td style="width: 75%">
                    <input type="text" name="rechargeAmount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>最大电流</th>
                <td style="width: 75%">
                    <input type="text" name="electricity" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>电表欠费是否拉闸</th>
                <td style="width: 75%">
                    <select name="switchStatus" >
                        <option value=<%=AmmeterConstant.switchStatus.YES%>>拉闸</option>
                        <option value=<%=AmmeterConstant.switchStatus.NO%>>不拉闸</option>
                    </select>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item">
            <div class="submitForm">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="editSubmit" id="cancell">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel" onclick="hideFun()">取消</button>
            </div>
        </div>
    </form>
</div>
<div id="activatePmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="activateForm" id="activateForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th><span class="red">*</span>电表序列号</th>
                <td>
                    <input type="text" name="ammeterId" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th><span class="red">*</span>电表地址</th>
                <td>
                    <input type="text" name="location" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>最高充值金额</th>
                <td style="width: 75%">
                    <input type="text" name="rechargeAmount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>电表欠费是否拉闸</th>
                <td style="width: 75%">
                    <select name="switchStatus" lay-verify="required">
                        <option value="">请选择</option>
                        <option value=<%=AmmeterConstant.switchStatus.YES%>>拉闸</option>
                        <option value=<%=AmmeterConstant.switchStatus.NO%>>不拉闸</option>
                    </select>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item">
            <div class="submitForm">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="activateSubmit" id="cancel4">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel5" onclick="hideFun()">取消</button>
            </div>
        </div>
    </form>
</div>
<div id="msgPmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="msgForm" id="msgForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th><span class="red">*</span>创建时间</th>
                <td>
                    <input type="text" name="createTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th><span class="red">*</span>电表地址</th>
                <td>
                    <input type="text" name="location" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>电表状态</th>
                <td style="width: 75%">
                    <input type="text" name="status" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>最高充值金额</th>
                <td style="width: 75%">
                    <input type="text" name="rechargeAmount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>最大电流</th>
                <td style="width: 75%">
                    <input type="text" name="electricity" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>总度数</th>
                <td style="width: 75%">
                    <input type="text" name="amount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>余额</th>
                <td style="width: 75%">
                    <input type="text" name="balance" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>上传数据时间</th>
                <td style="width: 75%">
                    <input type="text" name="readingTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>电表服务状态</th>
                <td style="width: 75%">
                    <input type="text" name="serverStatus" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
<%--            <tr>--%>
<%--                <th style="width: 25%"><span class="red">*</span>服务到期时间</th>--%>
<%--                <td style="width: 75%">--%>
<%--                    <input type="text" name="serverTime" lay-verify="required" autocomplete="off"--%>
<%--                           class="layui-input layui-form-danger" placeholder="">--%>
<%--                </td>--%>
<%--            </tr>--%>
            <tr>
                <th style="width: 25%"><span class="red">*</span>是否存在试用期</th>
                <td style="width: 75%">
                    <input type="text" name="tryStatus" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>是否欠费</th>
                <td style="width: 75%">
                    <input type="text" name="oweStatus" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>电表欠费是否拉闸</th>
                <td style="width: 75%">
                    <input type="text" name="switchStatus" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>电表激活时间</th>
                <td style="width: 75%">
                    <input type="text" name="activateTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>缴费类型</th>
                <td style="width: 75%">
                    <input type="text" name="payType" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            <tr>
                <th style="width: 25%"><span class="red">*</span>每季服务费</th>
                <td style="width: 75%">
                    <input type="text" name="payPrice" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            </tbody>
        </table>
        <%--<div class="layui-form-item">--%>
        <%--<div class="submitForm">--%>
        <%--<button class="layui-btn" type="button" lay-submit="" lay-filter="editSubmit" id="cancell">提交</button>--%>
        <%--<button type="button" class="layui-btn layui-btn-primary" id="cancel" onclick="hideFun()">取消</button>--%>
        <%--</div>--%>
        <%--</div>--%>
    </form>
</div>
</body>
<script src="assets/plugins/Jquery/jquery.min.js"></script>
<script src="assets/plugins/layui/layui.all.js"></script>
<script src="assets/js/common.js"></script>
<script>
    var ammeterId = null;
    $(function () {
        layui.use(['table', 'form', 'laydate'], function () {
            var table = layui.table,
                form = layui.form;
            var data = [
                {type: 'numbers', title: '序号'},
                {field: 'ammeterId', title: '电表序列号', sort: false, align: 'center'},
                {field: 'location', title: '电表地址', sort: false, align: 'center'},
                {field: 'warnType', title: '异常类型', sort: false, align: 'center'},
                {field: 'warnValue', title: '异常信息', sort: false, align: 'center'},
                {field: 'memo', title: '备注', sort: false, align: 'center'},
                {field: 'gmtCreate', title: '异常时间', sort: false, align: 'center'}
            ];
            table.render(
                renderTable("#payPmList", 'warnAmmeter/page', data)
            );

            table.on('tool(payPmList)', function (obj) {
                var data = obj.data;
                ammeterId = data.ammeterId
                if (obj.event === "msg") {
                    layer.open({
                        type: 1,
                        title: "详情",
                        btnAlign: "c",
                        offset: ['25px'],
                        area: ['500px', '700px'],
                        content: $("#msgPmDiv"),
                        success: function () {
                            form.val('msgForm', {
                                "createTime": data.createTime
                                , "location": data.location
                                , "status": data.status
                                , "rechargeAmount": data.rechargeAmount
                                , "amount": data.amount
                                , "balance": data.balance
                                , "readingTime": data.readingTime
                                , "serverStatus": data.serverStatus
                                , "serverTime": data.serverTime
                                , "tryStatus": data.tryStatus
                                , "oweStatus": data.oweStatus
                                , "switchStatus": data.switchStatus
                                , "activateTime": data.activateTime
                                , "payType": data.payType
                                , "payPrice": data.payPrice
                            })
                        },
                        end: function (i) {
                            layer.close(i);
                            hideWithReset("#msgPmDiv", "#msgForm")
                        }
                    });
                }
                if (obj.event === "activate") {
                    layer.open({
                        type: 1,
                        title: "详情",
                        btnAlign: "c",
                        offset: ['150px'],
                        area: ['500px', '340px'],
                        content: $("#activatePmDiv"),
                        success: function () {

                        },
                        end: function (i) {
                            layer.close(i);
                            hideWithReset("#activatePmDiv", "#activateForm")
                        }
                    });
                }
                if (obj.event === "edit") {

                    layer.open({
                        type: 1,
                        title: "详情",
                        btnAlign: "c",
                        offset: ['25px'],
                        area: ['500px', '700px'],
                        content: $("#addPmDiv"),
                        success: function () {
                            form.val('editForm', {
                                "createTime": data.createTime
                                , "location": data.location
                                , "status": data.status
                                , "rechargeAmount": data.rechargeAmount
                                , "amount": data.amount
                                , "balance": data.balance
                                , "readingTime": data.readingTime
                                , "serverStatus": data.serverStatus
                                , "serverTime": data.serverTime
                                , "tryStatus": data.tryStatus
                                , "oweStatus": data.oweStatus
                                , "switchStatus": data.switchStatus
                                , "activateTime": data.activateTime
                                , "payType": data.payType
                                , "payPrice": data.payPrice
                            })
                        },
                        end: function (i) {
                            layer.close(i);
                            hideWithReset("#addPmDiv", "#editForm")
                        }
                    });
                }
            });
            form.verify({
                overdueDays: [/^[+]{0,1}(\d+)$/, '逾期天数必须是正整数']
            });
            $("#addPm").click(function () {
                layer.open({
                    type: 1,
                    title: "绑定电表",
                    btnAlign: "c",
                    offset: ['150px'],
                    area: ['800px', '400px'],
                    content: $("#activatePmDiv"),
                    success: function () {

                    },
                    end: function (i) {
                        layer.close(i)
                        hideWithReset("#activatePmDiv", "#editForm")
                    }
                });
            })
            form.on('submit(editSubmit)', function (obj) {
                var url = "ammeter/edit";
                var data = obj.field;
                data.ammeterId = ammeterId;
                postAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("修改成功")
                        userId = null
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            form.on('submit(activateSubmit)', function (obj) {
                var url = "ammeter/activate"
                var data = obj.field
                postAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("激活成功")
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            $("#search").click(function () {
                var ammeterId = $("#ammeterId").val();
                var warnType = $("#warnType").val();
                table.reload('payPmList', {
                    page: {curr: 1},
                    where: {
                        ammeterId: ammeterId,
                        warnType:warnType
                    }
                })
            });
        });
    })

    $("#cancel").on("click", function () {
        layer.closeAll()
    });

    function hideFun() {
        layer.closeAll();
        userId = null
    }

    function hideWithReset(hide, reset) {
        $(hide).hide()
        $(reset)[0].reset()
    }
</script>
</body>
</html>
